<template>
  <div class="radioStationLayout">
    <RadioStationType :data="radioStationCategory" />
    <div v-if="!$route.query.id">
      <div class="leftAndRightList">
        <div class="leftBox">
          <!-- 推荐节目 -->
          <ProgramList :limit="10" />
        </div>
        <div class="rightBox">
          <!-- 节目排行 -->
          <ProgramRanking :limit="10" />
        </div>
      </div>
      <div>
        <ClassificationDetails
          v-for="item in radioStationCategory"
          :key="item.id"
          :itemObj="item"
        />
      </div>
    </div>
    <div v-if="$route.query.id">
      <!-- 优秀新电台 -->
      <NewRadioStation ref="newRadioStation" />
      <RadioCharts ref="radioCharts" />
    </div>
  </div>
</template>

<script>
import { radioStationType } from "@/api";
import RadioStationType from "@/views/RadioStation/RadioStationType.vue";
import ProgramList from "@/views/RadioStation/programList.vue";
import ProgramRanking from "@/views/RadioStation/programRanking.vue";
import ClassificationDetails from "@/views/RadioStation/classificationDetails.vue";
import NewRadioStation from "@/views/RadioStation/newRadioStation.vue";
import RadioCharts from "@/views/RadioStation/radioCharts.vue";
export default {
  components: {
    RadioStationType,
    ProgramRanking,
    ProgramList,
    ClassificationDetails,
    NewRadioStation,
    RadioCharts,
  },
  data() {
    return {
      radioStationCategory: [],
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      radioStationType().then((res) => {
        console.log(res.categories);
        this.radioStationCategory = res.categories;
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.$nextTick(() => {
      this.$refs.newRadioStation.getDate();
      this.$refs.radioCharts.getDate();
    });
  },
};
</script>

<style lang="scss" scoped>
.radioStationLayout {
  width: 980px;
  min-height: 700px;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
  .leftAndRightList {
    display: flex;
    justify-content: space-between;
    .leftBox,
    .rightBox {
      width: 426px;
    }
  }
}
</style>